<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>生命周期</title> 
    </head>
    <body>
        <div id = "app">
            {{ count }}
            <p><button @click = "add">add</button></p>
        </div>
        <button onclick = "app.$destroy()">销毁</button>
        <script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
        <script>
            var app = new Vue({
                el:'#app',
                data:{
                    count:1
                },
                methods:{
                    add:function(){
                        this.count++;
                    }
                },
                beforeCreate:function(){
                    console.log('1-beforeCreate 初始化之前');
                },
                created:function(){
                    console.log('2-created 创建完成');
                },
                beforeMount:function(){
                    console.log('3-beforeMount 挂载之前');
                },
                mounted:function(){
                    console.log('4-mounted 被挂载之后');
                },
                beforeUpdate:function(){
                    console.log('5-beforeUpdate 数据更新前');
                },
                updated:function(){
                    console.log('6-update 被更新后');
                },
                activated:function(){
                    console.log('7-activated');
                },
                deactivated:function(){
                    console.log('7-deactivated');
                },
                beforeDestroy:function(){
                    console.log('9-beforeDestroy 销毁之前');
                },
                destroyed:function(){
                    console.log('10-destroyed 销毁后');
                }
            })
        </script>
    </body>
</html>